<template>
  <div id="boxData">
    <div class="echarts" ref="main"></div>
  </div>
</template>

<script>
import echarts from "@/echarts/index";
export default {
  name: "boxData",
  data() {
    return {};
  },
  mounted() {
    this.InitEcharts();
  },
  methods: {
    InitEcharts() {
      let myecharts = echarts.init(this.$refs.main);
      let option = {
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "133,451",
          left: "center",
          top: "44%",
          textStyle: {
            textAlign: "center",
            fill: "#333",
            fontSize: 10,
            fontWeight: 400,
            color: "#fff",
          },
        },
        legend: {
          top: "5%",
          right: "right",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "票口" },
              { value: 735, name: "一道门" },
              { value: 580, name: "二道门" },
              { value: 484, name: "二道门" },
              { value: 300, name: "楼上" },
            ],
          },
        ],
      };
      option && myecharts.setOption(option);
      window.onresize = function () {
        myecharts.resize();
      };
    },
  },
};
</script>

<style scoped lang="scss">
#boxData {
  width: 100%;
  height: 100%;
}
.echarts {
  margin-left: -100px;
  width: 120%;
  height: 90%;
}
</style>